<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HunkWebSite</title>
<meta http-equiv="imagetoolbar" content="false" />
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.slidepanel.setup.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.min.js"></script>
<script type="text/javascript" src="scripts/jquery.cycle.setup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	screen_width = document.body.clientWidth;
	if (960 < screen_width) {
		$("#slidepanel").css("padding-left", (screen_width - 960)/2 + "px");
	}
});
</script>
</head>
<body>
	<div class="wrapper col1">
		<div id="header">
			<div id="logo">
				<h1>
					<a href="#">Hunk Evolution</a>
				</h1>
				<p>Personal WebSite For J2EE Framwork Exercise</p>
			</div>
			<div id="topnav">
				<ul>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<div id="topbar" style="width: 100%;background:url('${rctx}/tab_l.gif') bottom left no-repeat #4A5155;position: static;">
		<div id="slidepanel" style="display: inherit;">
			<div class="topbox">
				<h2>Introduction</h2>
				<p>This is a personal website about hunk's life.
				This is a personal website about hunk's life.
				This is a personal website about hunk's life.</p>
			</div>
			<div class="topbox">
				<h2>Guest Login Here</h2>
				<form action="login.action" method="post">
					<fieldset>
						<legend>Guest Login Form</legend>
						<label for="teachername">Username: <input type="text" name="user.username" id="user_name" value="" />
						</label> 
						<label for="teacherpass">Password: <input type="password" name="user.password" id="user_psd" value="" />
						</label>
						<label for="teacherremember"> <input class="checkbox" type="checkbox" name="teacherremember" id="teacherremember" checked="checked" /> Remember me
						</label>
						<p>
							<input type="submit" name="teacherlogin" id="user_login" value="Login" /> &nbsp; 
							<input type="reset" name="teacherreset" id="user_reset" value="Reset" />
						</p>
					</fieldset>
				</form>
			</div>
		<div class="topbox last">
        <h2>Administrator Login Here</h2>
        <form action="<c:url value="/user/login"/>" method="post">
          <fieldset>
            <legend>Pupils Login Form</legend>
            <label for="pupilname">Username:
              <input type="text" name="userName" id="userName" value="" />
            </label>
            <label for="pupilpass">Password:
              <input type="password" name="password" id="password" value="" />
            </label>
            <label for="pupilremember">
              <input class="checkbox" type="checkbox" name="pupilremember" id="pupilremember" checked="checked" />
              Remember me</label>
            <p>
              <input type="submit" name="pupillogin" id="pupillogin" value="Login" />
              &nbsp;
              <input type="reset" name="pupilreset" id="pupilreset" value="Reset" />
            </p>
          </fieldset>
        </form>
      </div>
     
		</div>
	</div>

	<div class="wrapper col4">
		<div id="footer">
			<div class="footbox">
				<h2>Lacus interdum</h2>
				<ul>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li><a href="#">Praesent et eros</a></li>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li class="last"><a href="#">Praesent et eros</a></li>
				</ul>
			</div>
			<div class="footbox">
				<h2>Lacus interdum</h2>
				<ul>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li><a href="#">Praesent et eros</a></li>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li class="last"><a href="#">Praesent et eros</a></li>
				</ul>
			</div>
			<div class="footbox">
				<h2>Lacus interdum</h2>
				<ul>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li><a href="#">Praesent et eros</a></li>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li class="last"><a href="#">Praesent et eros</a></li>
				</ul>
			</div>
			<div class="footbox">
				<h2>Lacus interdum</h2>
				<ul>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li><a href="#">Praesent et eros</a></li>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li class="last"><a href="#">Praesent et eros</a></li>
				</ul>
			</div>
			<div class="footbox last">
				<h2>Lacus interdum</h2>
				<ul>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li><a href="#">Praesent et eros</a></li>
					<li><a href="#">Lorem ipsum dolor</a></li>
					<li><a href="#">Suspendisse in neque</a></li>
					<li class="last"><a href="#">Praesent et eros</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
	</div>
	<div class="wrapper col5">
		<div id="copyright">
			<p class="fl_left">
				Copyright &copy; 2010 - All Rights Reserved - <a href="#">Domain
					Name</a>
			</p>
			<p class="fl_right">
				Template by Online Material
			</p>
			<br class="clear" />
		</div>
	</div>
</body>
</html>